<template>
   <el-dialog title="插单" :visible.sync="isDial" width="500px">
       <div class="orderInfoText">
           <p>物业地址：{{orderInfo.address}}</p>
           <p>验房日期：{{orderInfo.getHomeDate}}  {{orderInfo.getHomeTime}}</p>
           <p>服务时间：需{{orderInfo.serviceTimes}}分钟</p>
       </div>
        <el-form :model="form" size="mini">
            <el-form-item label="选择管家" :label-width="formLabelWidth">
                <el-select v-model="form.name" style="width:200px" placeholder="请选择管家">
                    <el-option label="管家一" value="shanghai"></el-option>
                    <el-option label="管家二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择时间" :label-width="formLabelWidth">
                <el-time-select placeholder="起始时间"  style="width:200px" v-model="form.time" :picker-options="{ start: '11:00', step: '00:30', end: '18:00'}" @change="timeSlot"></el-time-select>
                <p class="timeSlot" v-if="form.time">服务时间段：{{form.time}}~{{endTime}}</p>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false" size="mini">确 定</el-button>
        </div>
    </el-dialog> 
</template>

<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return {
            isDial: false,
            form: {
                name: '',
                time:"" ,
            },
            orderInfo:{},
            formLabelWidth: '80px',
            endTime:""
        }
    },
    created(){
        this.$root.$on("insertSheet",data=>{
            console.log(data)
            this.orderInfo=data
            this.isDial=true
        })
    },
    methods:{
        timeSlot(data){ //时间段选中
            console.log(data)
            let orderInfo=this.orderInfo
            let arr=data.split(":")
            let hour=parseInt(arr[0])
            let minute=parseInt(arr[1])
            let time=(hour*60)+minute+orderInfo.serviceTimes
            hour=parseInt(time/60)
            minute=time%60
            minute=minute<10?`0${minute}`:minute
            this.endTime=`${hour}:${minute}`
            console.log(this.endTime)
        }   
    }
}
</script>

<style lang="less" scoped>
.orderInfoText{
    background: #f5f5f5;
    line-height: 25px;
    width: 100%;
    padding: 10px 20px; 
    margin: -20px 0px 20px -20px;
}
.timeSlot{
    font-size: 12px;
    color: red
}
</style>

